<template>
  <div class="com-container">
    <div class="com-chart" ref="studentMap_ref">学生地图分布</div>
  </div>
</template>

<script>
import chalk from "../../../public/static/theme/chalk"
// 获取静态地图资源
import chinaMap from "../../../public/static/map/china.json";
// 获取处理返回散点数据和飞线终始点的方法
import {getProvinceCp} from "../../utils/map_utils";
import {getProvinceCo} from "../../utils/map_utils";

export default {
  props: ['admissionyear', 'academy','status'],
  // TODO 监视可视化大屏传递来的报到年份和学院数据的变化，并重新获取数据并更新图表
  watch: {
    admissionyear: {
      handler(newValue, oldValue) {
        this.getData()
      }
    },
    academy: {
      handler(newValue, oldValue) {
        this.getData()
      }
    },
    status: {
      handler(newValue, oldValue) {
        this.getData()
      }
    }
  },
  data() {
    return {
      chartInstance: null,
      lineData: [],
      scatterData: [],
      studentNumberData: [],
      maxValueOfStuMapNumber: 40
    };
  },
  mounted() {
    this.registerMap();
    this.initChart();
    this.getData();
    window.addEventListener("resize", this.screenAdapter);
    this.screenAdapter();
  },
  //在组件销毁时，进行监听事件的取消
  destroyed() {
    window.removeEventListener("resize", this.screenAdapter)
  },

  methods: {

    registerMap() {
      this.$echarts.registerMap("china", chinaMap);
    },
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.studentMap_ref,'chalk');
      const initOption = {
        // 调色盘
        color: ["red"],
        title: {
          text: "学生分布图",
        },
        geo: {
          map: "china",
          roam: true,
          zoom: 1.2,
          scaleLimit: {
            max: 2,
            min: 0.5,
          },
          emphasis: {
            label: {
              show: false,
            },
            itemStyle: {
              areaColor: "#92959e",
            },
          },
        },
        series: [
          // 轨迹的绘制
          {
            name: "轨迹",
            type: "lines",
            zlevel: 1,
            lineStyle: {
              color: "yellow",
              width: 1,
              opacity: 1,
              curveness: 0.2,
            },
            effect: {
              show: true,
              period: 14,
              symbol: "arrow",
              symbolSize: 6,
              trailLength: 0.2,
            },
            // coordinateSystem:'geo',

          },
          // 终始点涟漪效果的绘制
          {
            name: "终始点",
            type: "effectScatter",
            coordinateSystem: "geo",
            zlevel: 2,
            symbolSize: 5,
            rippleEffect: {
              period: 6,
              scale: 5,
              brushType: "stroke",
            },
            label: {
              show: true,
              offset: [35, 0],
              formatter: function (params) {
                return params.data.name;
              },
              color: "black",
              fontSize: 16,
              textBorderColor: "white",
              textBorderWidth: 1,
            },
            //注意此处的写法，由出发点和单个终点单独的配置组成
          },
          // 地图颜色标识不同区域人数
          {
            name: 'AreaColor',
            type: "map",
            map: "china",
            geoIndex: 0,
          },
        ],
        visualMap: {
          // 有多组数据series，通过seriesIndex指定视觉化的series，以免对其他数据造成影响
          seriesIndex: 2,
          min: 0, // 最小值
          max: this.maxValueOfStuMapNumber, // 最大值
          inRange: {
            color: ["white", "blue"], // 颜色的范围
          },
          calculable: true, // 是否显示拖拽用的手柄（手柄能拖拽调整选中范围）
        },
      };
      this.chartInstance.setOption(initOption);
    },
    getData() {
      // 清空之前的数据缓存
      this.lineData = [];
      this.scatterData = [];
      this.studentNumberData = []
      this.maxValueOfStuMapNumber = 0
      // 后台获取新数据
      this.request.get("stuScreen/map", {
        params: {
          admissionyear: this.admissionyear,
          academy: this.academy
        }
      }).then(res => {
        if (res.code == 20041) {
          // 临时变量
          let stuScatterData = []
          let stuLineData = []

          const numberData = res.data
          // Max用于求得来自不同省份的学生人数的最大值
          let Max = numberData[0].value

          for (let i = 0; i < numberData.length; i++) {

            if (numberData[i].value > Max) {
              Max = numberData[i].value
            }
            // 添加散点数据 且在添加散点数据的时候排除掉河南 ps:  河南开封的散点单独绘制
            if(numberData[i].name == "河南")
              continue;
            stuScatterData.push(getProvinceCp(numberData[i].name))
          }
          for (let i = 0; i < numberData.length; i++) {
            // 绘制飞线图的时候排除掉河南省到河南开封的飞线
            if(numberData[i].name == "河南")
              continue;
            stuLineData.push(getProvinceCo(numberData[i].name))
          }
          // 真实赋值
          this.maxValueOfStuMapNumber = Max
          this.scatterData = stuScatterData
          this.studentNumberData = numberData
          this.lineData = stuLineData
        }
      }).finally(() => {
        this.updateChart()
      })

    },
    updateChart() {
      const dataOption = {
        series: [
          // 轨迹的绘制
          {
            name: '轨迹',
            data: this.lineData,
          },
          // 出发点涟漪效果的绘制
          {
            name: '出发点',
            //注意此处的写法，由多个出发点和单个终点单独的配置组成
            data: [
              ...this.scatterData,
              {
                name: "河南开封",
                value: [114.24988,34.834154],
/*                 label: {
                    formatter: function (params) {
                      return "河南开封";
                    },
                   offset: [20, 15],
                 },*/
              },
            ],
          },
          // 地图颜色标识不同区域人数
          {
            name: 'AreaColor',
            data: this.studentNumberData,
          },
        ],
        // 根据不同省份来的学生的最大值调整visualMap的min和max
        visualMap: {
          min: 0, // 最小值
          max: this.maxValueOfStuMapNumber, // 最大值
        },
      };
      this.chartInstance.setOption(dataOption);
    },
    screenAdapter() {
      const sizeModel = (this.$refs.studentMap_ref.offsetWidth / 100) * 7.2;
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: sizeModel / 2
          }
        },
        series: [
          // 终始点涟漪效果的绘制
          {
            name: "终始点",
            label: {
              fontSize: sizeModel * 0.3,
            },
            //注意此处的写法，由出发点和单个终点单独的配置组成
          },
          // 地图颜色标识不同区域人数
          {
            name: 'AreaColor',
            type: "map",
            map: "china",
            geoIndex: 0,
          },
        ],
      };
      this.chartInstance.setOption(adapterOption);
      this.chartInstance.resize();
    },
  },
};
</script>
// 设置为scoped，仅在本页面生效
<style lang="less" scoped></style>
/*
虚假的赋值 仅用于本人开发时的数据处理样式的参考 现保留以作纪念
var falseStudentNumberData = [
{ name: "天津", value: 20 },
{ name: "重庆", value: 15 },
{ name: "河南", value: 200 },
{ name: "云南", value: 20 },
{ name: "新疆", value: 30 },
{ name: "江苏", value: 8 },
{ name: "陕西", value: 25 },
{ name: "贵州", value: 35 },
{ name: "西藏", value: 24 },
{ name: "四川", value: 13 },
];

var falseLineData = [
{
name: "新疆",
coords: [
[86.9023, 41.148],
[112.434468, 34.663041],
],
},
{
name: "西藏",
coords: [
[87.8695, 31.6846],
[112.434468, 34.663041],
],
},
{
name: "陕西",
coords: [
[108.5996, 33.7396],
[112.434468, 34.663041],
],
},
{
name: "天津",
coords: [
[117.4219, 39.4189],
[112.434468, 34.663041],
],
},
{
name: "江苏",
coords: [
[119.8586, 32.915],
[112.434468, 34.663041],
],
},
{
name: "四川",
coords: [
[102.9199, 30.1904],
[112.434468, 34.663041],
],
},
{
name: "贵州",
coords: [
[106.6113, 26.6385],
[112.434468, 34.663041],
],
},
{
name: "重庆",
coords: [
[107.7539, 29.8904],
[112.434468, 34.663041],
],
},
{
name: "云南",
coords: [
[101.0652, 24.6807],
[112.434468, 34.663041],
],
},
];
var falseScatterData = [
{
name: "西藏",
value: [87.8695, 31.6846], // 散点的坐标, 使用的是经纬度
},
{
name: "新疆",
value: [86.9023, 41.148],
},
{
name: "陕西",
value: [108.5996, 33.7396],
},
{
name: "天津",
value: [117.4219, 39.4189],
},
{
name: "江苏",
value: [119.8586, 32.915],
},
{
name: "四川",
value: [102.9199, 30.1904],
},
{
name: "贵州",
value: [106.6113, 26.6385],
},
{
name: "重庆",
value: [107.7539, 29.8904],
},
{
name: "云南",
value: [101.0652, 24.6807],
},
];
this.scatterData = falseScatterData;
this.studentNumberData = falseStudentNumberData;
this.lineData = falseLineData;
*/